<script setup>
import { ref, watch, provide } from 'vue';
import api from '@/api/index.js'
import MyTable from '@/components/MyTable/MyTable.vue';
const emits = defineEmits(['close', 'init', 'reload'])
const props = defineProps({
  curRow: {
    type: Object,
    default: () => ({})
  },
})
// 弹窗标题
const title = '报名详情'
const tableData = ref([])
// 同步表格数据到表单数据内
watch(() => props.curRow, async (val) => {
  // 按钮类型的父节点id为数组，需要特殊处理
  const { data: { records } } = await api.getPxbmList({ isSys: 1, trainId: val.trainId, size: 999, current: 1 })
  tableData.value = records
}, { deep: true, immediate: true })
// 是否显示弹窗
const show = ref(false);
// 弹窗显示状态切换时触发
const afterOpenChange = bool => {
  if (!bool) {
    emits('close')
  }
};
// 打开弹窗
const open = () => {
  show.value = true;
};
defineExpose({ open })
// 表格列配置
const columns = ref([
  { ellipsis: true, title: '地址', dataIndex: 'address', key: 'address', },
  { ellipsis: true, title: '身份证号码', dataIndex: 'idCardNo', key: 'idCardNo', },
  { ellipsis: true, title: '年龄', dataIndex: 'age', key: 'age', },
  { ellipsis: true, title: '报名人姓名', dataIndex: 'userName', key: 'userName', },
  { ellipsis: true, title: '报名人联系电话', dataIndex: 'userPhone', key: 'userPhone', },
  { ellipsis: true, title: '报名培训开始时间', dataIndex: 'startDate', key: 'startDate', },
  { ellipsis: true, title: '报名培训结束时间', dataIndex: 'endDate', key: 'endDate', },
  { ellipsis: true, title: '培训标题', dataIndex: 'trainTitle', key: 'trainTitle', },
  { ellipsis: true, title: '培训类型', key: 'trainType', },
  { ellipsis: true, title: '报名时间', dataIndex: 'createdTime', key: 'createdTime', },
])

provide('columns', columns.value)
provide('tableData', tableData)
</script>

<template>
  <a-drawer :maskClosable="false" :closable="false" destroyOnClose v-model:open="show" class="custom-class"
    root-class-name="root-class-name" :title="title" placement="right" @after-open-change="afterOpenChange"
    width="1600px">
    <MyTable :pagination="false" :scroll="{ y: 'calc(100vh - 383px)' }">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'trainType'">
          {{ ['', '农机培训', '政策培训'][record.trainType] }}
        </template>
      </template>
    </MyTable>
    <template #footer>
      <div style="display: flex;gap: 5px;">
        <a-button type="primary" ghost @click="show = false">关闭</a-button>
      </div>
    </template>
  </a-drawer>
</template>